<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue.js -->
		<!-- 第一种方式，将vue.js文件放在项目下，进行引入 -->
		<script src="js/vue.js"></script>
		<!-- 第二种方式，直接引入网络地址 -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
		<style>
		button{
			position: absolute;
			background-color: transparent;
			border: 0px;
			top:300px;
			color: #FFFFFF;																				
		}	
		#left{
								
			}
			#right{
				left: 700px;
			}
		</style>
</head>
	<body>
		<!-- 结合已经学习过的vue常用指令，模拟案例：
		 要求：页面上进行显示图片，当点击图片上的"<"图片切换到上一张
		 页面上进行显示图片，当点击图片上的">"图片切换到下一张-->
		<div id="app">	
			<button v-show="index>0" @click="leftImg()" id="left" style="width: 200px;height: 100px;"><h2>&lt;</h2></button>
			<img style="width: 50rem;height: 37.5rem;" :src="imgSrc[index]">
			<button v-show="index<6" @click="rightImg()" id="right" style="width: 200px;height: 100px;"><h2>&gt;</h2></button>
		</div>
		<script>
		var app=new Vue({
			el:"#app",
			data:{
				imgSrc:["img/pg1.jpg","img/pg2.jpg","img/pg3.jpg","img/pg4.jpg",
				"img/pg5.jpg","img/pg6.jpg","img/pg7.jpg"],
				index:0
				
			},
			methods:{
				leftImg:function(){
					this.index--
				},
				rightImg:function(){
					this.index++
				}
				
			}												
		})				
		</script>
		
	</body>
</html>
